import React, {
  useEffect,
  forwardRef,
  useImperativeHandle,
  useMemo,
  useState,
} from "react";
import { EyeInvisibleOutline, EyeOutline } from "antd-mobile-icons";
import { Button, Form, Input } from "antd-mobile";
import { useDispatch } from "react-redux";
import { getcode } from "store/Lzk_Store/Patint";

const Perfectmessagetwo = (
  {
    btn,
    buffer,
  }: {
    btn: (key: "one" | "two" | "three") => Promise<void>;
    buffer: any;
  },
  ref: any
) => {
  const [form] = Form.useForm();
  const [visible, setVisible] = useState(false);
  const dispatch = useDispatch<any>();

  const next = () => {
    btn("three");
  };

  const echo = useMemo(
    () => ({
      email: buffer.email,
      code: buffer.code,
      pwd1: buffer.pwd1,
      pwd2: buffer.pwd2,
    }),
    [buffer.email, buffer.code, buffer.pwd1, buffer.pwd2]
  );

  const Getcode = () => {
    const email = form.getFieldValue("email");
    // console.log(email);

    dispatch(getcode(email));
  };

  useImperativeHandle(ref, () => {
    return {
      validateFields: form.validateFields,
    };
  });

  useEffect(() => {
    form.setFieldsValue(echo);
  }, [form, echo]);

  return (
    <div className="Perfectmessagetwo">
      <Form form={form}>
        <Form.Item
          name={"email"}
          extra={<Button onClick={Getcode}>获取验证码</Button>}
        >
          <Input placeholder="请输入邮箱" />
        </Form.Item>
        <Form.Item name={"code"}>
          <Input placeholder="请输入验证码" />
        </Form.Item>
        <Form.Item
          name={"pwd1"}
          extra={
            <div>
              {!visible ? (
                <EyeInvisibleOutline onClick={() => setVisible(true)} />
              ) : (
                <EyeOutline onClick={() => setVisible(false)} />
              )}
            </div>
          }
        >
          <Input
            placeholder="请输入密码"
            type={visible ? "text" : "password"}
          />
        </Form.Item>
        <Form.Item
          name={"pwd2"}
          extra={
            <div>
              {!visible ? (
                <EyeInvisibleOutline onClick={() => setVisible(true)} />
              ) : (
                <EyeOutline onClick={() => setVisible(false)} />
              )}
            </div>
          }
        >
          <Input placeholder="确认密码" type={visible ? "text" : "password"} />
        </Form.Item>
      </Form>
      <Button onClick={next}>下一步</Button>
    </div>
  );
};
export default forwardRef(Perfectmessagetwo);
